<template>
  <section>
    <template v-if="item.templateType == 1">
      <template v-if="item.bgStyle == 1">
        <div class="awClassheader1 header">
          <div class="c-fs54 c-fw-b c-fc-white c-textAlign-c c-ph52 c-text-ellipsis1 awClassTxtShadow1">
            {{item.title}}
          </div>
        </div>
        <div class="c-ph20 c-flex-row c-flexw-wrap c-justify-sb awClassLinear1 c-pt30 c-pb10">
          <div v-for="(it, index) in item.items" :key="index" class="c-ww290 c-text-hidden c-mb20" @click="linkToDetail(it)">
            <div class="c-text-hidden" :style="getBorderRadius(borderRadius, '0.4rem')">
              <div class="c-p c-bg-white c-text-hidden" :style="getImageRatio(imageSetting, '3 / 2')">
                <template v-if="it.cover && (it.cover.coverType ==1 || it.cover.coverType ==2)">
                  <vip-custom-img :imageSetting="imageSetting" :borderRadiusPosition="'top'" :cover="it.cover" :imgClass="'imgCloseBig'" :hasText="false"/>
                </template>
                <template v-else>
                  <custom-img :borderRadiusPosition="'top'" :borderRadius="borderRadius" class="c-w100 c-h c-text-hidden" :url="showCover(it) || showDefultCover(it)" :imageSetting="imageSetting"></custom-img>
                </template>
                <div class="c-pa p-t44 c-p-l0 c-w100 c-textAlign-c c-fc-xblack c-fs36" v-if="it.prodType == ckfrom.shareholderPayVoucher"><span class="c-fw-b">{{parseFloat(it.price)}}</span><span class="c-fs28">元</span></div>
                <vip-status :item="it" v-if="visible.vipVisible"></vip-status>
              </div>
              <div class="c-bg-white c-ph20 c-pv20">
                <p class="c-fs24 c-fc-xblack c-mb20 c-fw-b" :class="getTitleVisible()">{{it.name}}</p>
                <p class="c-fs20 c-fc-gray c-mb20 c-lh22" v-if="visible.dataVisible && !isAgentApply(it.prodType) && !it.marketingType && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(it.prodType)))">{{showNumber(it) | formatNumber}}{{showTypeText(it)}}</p>
                <div class="awClassBtn1 btn c-flex-row c-aligni-center c-justify-sb c-pt20 c-pb15 c-pr20 c-lh" v-if="visible.priceVisible && (!$isWxAppIos() || ($isWxAppIos() && it.payType != 2))">
                  <div class="c-ww166 c-fs26 c-fc-white c-textAlign-c c-fw-b">
                    <span class="c-fs20" v-if="showPriceTag(it)">{{'￥' | iosPriceFilter}}</span><span v-html="getRangePrice(it)"></span>
                  </div>
                  <div class="c-fcff4118 c-fs20 c-fw-b c-mt4">马上抢</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
      <template v-else-if="item.bgStyle == 2">
        <div class="c-pb56 awClassBottom2 bottom">
          <div class="awClassheader2 header">
            <div class="c-fs54 c-fw-b c-fc-white c-textAlign-c c-ph64 c-text-ellipsis1 awClassTxtShadow1">
              {{item.title}}
            </div>
          </div>
          <div class="awClassBody2 body c-ph40">
            <div :style="getBorderRadius(borderRadius, '0.4rem')" class="c-text-hidden c-bg-white c-pv4 c-flex-row c-aligni-center c-justify-sb c-w100" :class="index == (item.items.length - 1) ? '' : 'c-mb20'" v-for="(it, index) in item.items" :key="index" @click="linkToDetail(it)">
              <div class="c-ww270 c-ml4 c-text-hidden c-p c-flex-row c-flex-center c-p c-bg-white" :style="getBorderRadius(borderRadius, '0.4rem', 'left') + getImageRatio(imageSetting, '3 / 2')">
                <template v-if="it.cover && (it.cover.coverType ==1 || it.cover.coverType ==2)">
                  <vip-custom-img :imageSetting="imageSetting" :borderRadiusPosition="'left'" :cover="it.cover" :imgClass="'imgCloseBig'" :hasText="false"/>
                </template>
                <template v-else>
                  <custom-img  :borderRadiusPosition="'left'" :borderRadius="borderRadius" class="c-w100 c-h c-text-hidden" :url="showCover(it) || showDefultCover(it)" :imageSetting="imageSetting"></custom-img>
                </template>
                <vip-status :item="it" v-if="visible.vipVisible"></vip-status>
                <div class="c-pa c-p-t40 c-p-l0 c-w100 c-textAlign-c c-fc-xblack c-fs36 c-pz10" v-if="it.prodType == ckfrom.shareholderPayVoucher"><span class="c-fw-b">{{parseFloat(it.price)}}</span><span class="c-fs28">元</span></div>
              </div>
              <div class="c-ph20 c-pv20 c-w0 c-flex-grow1">
                <p class="c-fs24 c-fc-xblack c-mb20 c-fw-b" :class="getTitleVisible()">{{it.name}}</p>
                <p class="c-fs20 c-fc-gray c-mb20 c-lh22" v-if="visible.dataVisible && !isAgentApply(it.prodType) && !it.marketingType && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(it.prodType)))">{{showNumber(it) | formatNumber}}{{showTypeText(it)}}</p>
                <div class="awClassBtn2 btn c-flex-row c-aligni-center c-justify-sb c-pr20 c-hh50" v-if="visible.priceVisible && (!$isWxAppIos() || ($isWxAppIos() && it.payType != 2))">
                  <div class="c-ww148 c-fs26 c-fc-white c-textAlign-c">
                    <span class="c-fs20" v-if="showPriceTag(it)">{{'￥' | iosPriceFilter}}</span><span v-html="getRangePrice(it)"></span>
                  </div>
                  <div class="c-fc-d21318 c-fs20 c-fw-b">马上抢</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
      <template v-else-if="item.bgStyle == 3">
        <div class="awClassBg3 body c-pb30">
          <div class="awClassheader3 header c-ph14">
            <div class="c-fs54 c-lh64 c-hh100 c-fw-b c-fc-fff8da c-textAlign-c c-text-ellipsis1 awClassTxtShadow1 c-mb64">
              <!-- 定义了视口框大小为340x100个单位 -->
              <svg viewBox="0 0 340 100">
                <defs>
                  <!-- d 属性中的路径数据描述了一个圆弧路径，从坐标 (-248, 450) 到 (588, 450)，弧的半径是 100 个单位。 -->
                  <path id="textPath" d="M-248 450 A100 100 0 1 1 588 450"></path>
                </defs>
                <text font-size="30">
                  <!-- startOffset="50%"指定文本起始位置位于路径的中间 text-anchor: middle;文本锚点居中 -->
                  <textPath xlink:href="#textPath" startOffset="50%" style="fill: #fff8da; text-anchor: middle;">{{item.title}}</textPath>
                </text>
              </svg>
            </div>
            <div class="awClassInnerBody3 body c-ph24">
              <div class="c-flex-row c-flexw-wrap c-justify-sb">
                <div v-for="(it, index) in item.items.filter((it, index) => index < 2)" :key="index" class="c-ww270 c-text-hidden" @click="linkToDetail(it)">
                  <div class="c-text-hidden c-bd1-white c-p c-bg-white" :style="getBorderRadius(borderRadius, '0.4rem', 'top') + getImageRatio(imageSetting, '3 / 2')">
                    <template v-if="it.cover && (it.cover.coverType ==1 || it.cover.coverType ==2)">
                      <vip-custom-img :imageSetting="imageSetting" :borderRadiusPosition="'top'" :cover="it.cover" :imgClass="'imgCloseBig'" :hasText="false"/>
                    </template>
                    <template v-else>
                      <custom-img :borderRadiusPosition="'top'" :borderRadius="borderRadius" class="c-w100 c-h c-text-hidden" :url="showCover(it) || showDefultCover(it)" :imageSetting="imageSetting"></custom-img>
                    </template>
                    <vip-status :item="it" v-if="visible.vipVisible"></vip-status>
                    <div class="c-pa c-p-t40 c-p-l0 c-w100 c-textAlign-c c-fc-xblack c-fs36 c-pz10 c-ws-n" v-if="it.prodType == ckfrom.shareholderPayVoucher"><span class="c-fw-b">{{parseFloat(it.price)}}</span><span class="c-fs28">元</span></div>
                  </div>
                  <div class="c-bg-white c-ph20 c-pv20 c-text-hidden" :style="getBorderRadius(borderRadius, '0.4rem', 'bottom')">
                    <p class="c-fs24 c-fc-xblack c-mb20 c-fw-b" :class="getTitleVisible()">{{it.name}}</p>
                    <p class="c-fs20 c-fc-gray c-mb20 c-lh22" v-if="visible.dataVisible && !isAgentApply(it.prodType) && !it.marketingType && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(it.prodType)))">{{showNumber(it) | formatNumber}}{{showTypeText(it)}}</p>
                    <div class="awClassBtn3 btn c-flex-row c-aligni-center c-justify-sb c-pt18 c-pb15 c-pr32 c-lh" v-if="visible.priceVisible && (!$isWxAppIos() || ($isWxAppIos() && it.payType != 2))">
                      <div class="c-ww148 c-fs26 c-fc-white c-textAlign-c c-fw-b">
                        <span class="c-fs20" v-if="showPriceTag(it)">{{'￥' | iosPriceFilter}}</span><span v-html="getRangePrice(it)"></span>
                      </div>
                      <div class="c-fc-d21318 c-fw-b c-fs20">购买</div>
                    </div>
                  </div>
                </div>
              </div>
              <div v-if="item.items.length > 2" class="c-flex-row c-flexw-wrap c-justify-sb">
                <div v-for="(it, index) in item.items.filter((it, index) => index != 0 && index != 1)" :key="index" class="c-w100" @click="linkToDetail(it)">
                  <div class="c-text-hidden c-bg-white c-mt24 c-flex-row c-aligni-center c-justify-sb c-w100" :style="getBorderRadius(borderRadius, '0.4rem')">
                    <div class="c-ww270 c-text-hidden c-bd1-white c-p c-bg-white" :style="getBorderRadius(borderRadius, '0.4rem', 'left') + getImageRatio(imageSetting, '3 / 2')">
                      <template v-if="it.cover && (it.cover.coverType ==1 || it.cover.coverType ==2)">
                        <vip-custom-img :imageSetting="imageSetting" :borderRadiusPosition="'left'" :cover="it.cover" :imgClass="'imgCloseBig'" :hasText="false"/>
                      </template>
                      <template v-else>
                        <custom-img  :borderRadiusPosition="'left'" :borderRadius="borderRadius" class="c-w100 c-h c-text-hidden" :url="showCover(it) || showDefultCover(it)" :imageSetting="imageSetting"></custom-img>
                      </template>
                      <vip-status :item="it" v-if="visible.vipVisible"></vip-status>
                      <div class="c-pa c-p-t40 c-p-l0 c-w100 c-textAlign-c c-fc-xblack c-fs36 c-pz10 c-ws-n" v-if="it.prodType == ckfrom.shareholderPayVoucher"><span class="c-fw-b">{{parseFloat(it.price)}}</span><span class="c-fs28">元</span></div>
                    </div>
                    <div class="c-ph20 c-pv20 c-w0 c-flex-grow1">
                      <p class="c-fs24 c-fc-xblack c-mb20 c-fw-b" :class="getTitleVisible()">{{it.name}}</p>
                      <p class="c-fs20 c-fc-gray c-mb20 c-lh22" v-if="visible.dataVisible && !isAgentApply(it.prodType) && !it.marketingType && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(it.prodType)))">{{showNumber(it) | formatNumber}}{{showTypeText(it)}}</p>
                      <div class="awClassBtn3 btn c-flex-row c-aligni-center c-justify-sb c-pt18 c-pb15 c-pr32 c-lh" v-if="visible.priceVisible && (!$isWxAppIos() || ($isWxAppIos() && it.payType != 2))">
                        <div class="c-ww148 c-fs26 c-fc-white c-textAlign-c">
                          <span class="c-fs20" v-if="showPriceTag(it)">{{'￥' | iosPriceFilter}}</span><span v-html="getRangePrice(it)"></span>
                        </div>
                        <div class="c-fc-d21318 c-fw-b c-fs20">购买</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="c-ph14">
            <div class="awClassInnerBottom3 bottom c-pb44"></div>
          </div>
        </div>
      </template>
      <template v-else-if="item.bgStyle == 4">
        <div class="c-pb44 awClassBottom4 bottom">
          <div class="awClassheader4 header">
            <div class="c-fs54 c-fc-white c-ph24 c-text-ellipsis1">
              {{item.title}}
            </div>
          </div>
          <div class="awClassBody4 body c-ph60">
            <div class="c-w100 c-pb40" v-if="item.items && item.items[0]">
              <div class="c-w100 c-p c-text-hidden boxShaDow" :style="getBorderRadius(borderRadius, '0.4rem')" @click="linkToDetail(item.items[0])">
                <div class="c-text-hidden c-p c-bg-white" :style="getImageRatio(imageSetting, '3 / 2')">
                  <template v-if="item.items[0].cover && (item.items[0].cover.coverType ==1 || item.items[0].cover.coverType ==2)">
                    <vip-custom-img :imageSetting="imageSetting" :cover="item.items[0].cover" :imgClass="'imgCloseBig'" :hasText="false"/>
                  </template>
                  <template v-else>
                    <custom-img :borderRadius="borderRadius" class="c-w100 c-h c-text-hidden" :url="showCover(item.items[0]) || showDefultCover(item.items[0])" :imageSetting="imageSetting"></custom-img>
                  </template>
                  <vip-status :item="item.items[0]" v-if="visible.vipVisible"></vip-status>
                  <div class="c-pa c-p-t80 c-p-l0 c-w100 c-textAlign-c c-fc-xblack c-fs60 c-pz10 c-ws-n" v-if="item.items[0].prodType == ckfrom.shareholderPayVoucher"><span class="c-fw-b">{{parseFloat(item.items[0].price)}}</span><span class="c-fs28">元</span></div>
                </div>
                <div class="c-pa c-p-b0 c-p-l0 c-hh64 c-lh64 c-pz10" v-if="(visible.dataVisible && !isAgentApply(item.items[0].prodType) && !item.items[0].marketingType && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(item.items[0].prodType))))||visible.priceVisible">
                  <div class="c-fc-sblack c-fs24 c-h c-translucent-white80 br-right32 c-textAlign-c c-pr16 c-lh64" :class="visible.priceVisible ? 'c-pl190' : 'c-pl12'" v-if="visible.dataVisible && !isAgentApply(item.items[0].prodType) && !item.items[0].marketingType && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(item.items[0].prodType)))">{{showNumber(item.items[0]) | formatNumber}}{{showTypeText(item.items[0])}}</div>
                  <div class="c-ww180 c-fs32 c-textAlign-c c-h c-fc-white aw4ButBg br-right32 c-pa c-p-l0 c-p-b0 c-lh64 c-fw-b" v-if="visible.priceVisible && (!$isWxAppIos() || ($isWxAppIos() && item.items[0].payType != 2))">
                    <span class="c-fs20" v-if="showPriceTag(item.items[0])">{{'￥' | iosPriceFilter}}</span><span v-html="getRangePrice(item.items[0])"></span>
                  </div>
                </div>
              </div>
              <p class="c-fs24 c-fc-xblack c-mt24 c-fw-b" :class="getTitleVisible()">{{item.items[0].name}}</p>
            </div>
            <div class="c-flex-row c-justify-sb c-flexw-wrap">
              <div v-for="(it, index) in item.items.filter((item, index) => index != 0)" :key="index" @click="linkToDetail(it)">
                <div class="c-ww250 c-text-hidden c-mb24 c-bg-white boxShaDow" :style="getBorderRadius(borderRadius, '0.4rem')">
                  <div class="c-w100 c-h c-text-hidden c-p c-bg-white" :style="getImageRatio(imageSetting, '3 / 2')">
                    <template v-if="it.cover && (it.cover.coverType ==1 || it.cover.coverType ==2)">
                      <vip-custom-img :imageSetting="imageSetting" :borderRadiusPosition="'top'" :cover="it.cover" :imgClass="'imgCloseBig'" :hasText="false"/>
                    </template>
                    <template v-else>
                      <custom-img class="c-w100 c-h c-text-hidden" :borderRadius="borderRadius" :borderRadiusPosition="'top'" :url="showCover(it) || showDefultCover(it)" :imageSetting="imageSetting"></custom-img>
                    </template>
                    <vip-status :item="it" v-if="visible.vipVisible"></vip-status>
                    <div class="c-pa p-t38 c-p-l0 c-w100 c-textAlign-c c-fc-xblack c-fs36 c-pz10 c-ws-n" v-if="it.prodType == ckfrom.shareholderPayVoucher"><span class="c-fw-b">{{parseFloat(it.price)}}</span><span class="c-fs28">元</span></div>
                  </div>
                  <div class="c-bg-white c-ph10 c-pt20 c-pb10">
                    <p class="c-fs24 c-fc-xblack c-mb20 c-fw-b" :class="getTitleVisible()">{{it.name}}</p>
                    <p class="c-fs20 c-fc-gray c-mb20 c-lh22" v-if="visible.dataVisible && !isAgentApply(it.prodType) && !it.marketingType && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(it.prodType)))">{{showNumber(it) | formatNumber}}{{showTypeText(it)}}</p>
                    <div class="awClassBtn4 btn c-flex-row c-aligni-center c-justify-sb c-pr16 c-hh50" v-if="visible.priceVisible && (!$isWxAppIos() || ($isWxAppIos() && it.payType != 2))">
                      <div class="c-ww150 c-fs26 c-textAlign-c c-fc-white c-fw-b">
                        <span class="c-fs20" v-if="showPriceTag(it)">{{'￥' | iosPriceFilter}}</span><span v-html="getRangePrice(it)"></span>
                      </div>
                      <div class="c-fc-94661E c-fw-b c-fs20">购买</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
      <template v-else-if="item.bgStyle == 5">
        <div class="awClassheader5 header">
          <div class="c-fs54 c-fw-b c-fc-xblack c-textAlign-c c-ph52 c-text-ellipsis1 awClassTxtShadow5">
            {{item.title}}
          </div>
        </div>
        <div class="c-ph12 bg-ffe2e9 c-pb16">
          <div class="c-pl48 c-pr64 c-flex-row c-flexw-wrap c-justify-sb awClassBody5">
            <div v-for="(it, index) in item.items" :key="index" class="c-ww240 c-text-hidden c-mb30" @click="linkToDetail(it)">
              <div class="c-w100 c-text-hidden c-p c-bg-white" :style="getBorderRadius(borderRadius, '0.4rem') + getImageRatio(imageSetting, '3 / 2')">
                <template v-if="it.cover && (it.cover.coverType ==1 || it.cover.coverType ==2)">
                  <vip-custom-img :imageSetting="imageSetting" :cover="it.cover" :imgClass="'imgCloseBig'" :hasText="false"/>
                </template>
                <template v-else>
                  <custom-img class="c-w100 c-h c-text-hidden" :borderRadius="borderRadius" :url="showCover(it) || showDefultCover(it)" :imageSetting="imageSetting"></custom-img>
                </template>
                <vip-status :item="it" v-if="visible.vipVisible"></vip-status>
                <div class="c-pa p-t44 c-p-l0 c-w100 c-textAlign-c c-fc-xblack c-fs36" v-if="it.prodType == ckfrom.shareholderPayVoucher"><span class="c-fw-b">{{parseFloat(it.price)}}</span><span class="c-fs28">元</span></div>
              </div>
              <div class="c-text-hidden c-pt16">
                <p class="c-fs24 c-fc-xblack c-fw-b c-fw-b" :class="getTitleVisible()">{{it.name}}</p>
                <p class="c-fs20 c-fc-gray c-mb10 c-mt8 c-lh32" v-if="visible.dataVisible && !isAgentApply(it.prodType) && !it.marketingType && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(it.prodType)))">{{showNumber(it) | formatNumber}}{{showTypeText(it)}}</p>
                <div class="awClassBtn5 btn c-flex-row c-aligni-center c-justify-sb c-hh48 c-lh64 c-pr20" v-if="visible.priceVisible && (!$isWxAppIos() || ($isWxAppIos() && it.payType != 2))">
                  <div class="c-ww140 c-fc-white c-pl12 c-fw-b" :class="showPriceTag(it) ? 'c-fs28' : 'c-fs24'">
                    <span class="c-fs20" v-if="showPriceTag(it)">{{'￥' | iosPriceFilter}}</span><span v-html="getRangePrice(it)"></span>
                  </div>
                  <div class="c-fc-white c-fs24 c-fw-b">抢购</div>
                </div>
              </div>
            </div>
          </div>
          <div class="awClassBottom5 c-hh72 mt-30"></div>
        </div>
      </template>
      <template v-else-if="item.bgStyle == 6">
        <div class="awClassBg6 c-pb32">
          <div class="awClassheader6 header">
            <div class="c-fs60 c-fw-b fc-6A01CF c-textAlign-c c-pl40 c-text-ellipsis2 awClassTxtShadow6 c-ww300">
              {{item.title}}
            </div>
          </div>
          <div class="c-ph20">
            <div class="c-ph24 c-bg-white">
              <div v-for="(it, index) in item.items" :key="index" class="c-text-hidden c-flex-row c-justify-sb" :class="index == item.items.length - 1 ? '' : 'c-mb36'" @click="linkToDetail(it)">
                <div class="c-ww240 c-text-hidden c-p c-bg-white" :style="getBorderRadius(borderRadius, '0.4rem') + getImageRatio(imageSetting, '3 / 2')">
                  <template v-if="it.cover && (it.cover.coverType ==1 || it.cover.coverType ==2)">
                    <vip-custom-img :imageSetting="imageSetting" :cover="it.cover" :imgClass="'imgCloseBig'" :hasText="false"/>
                  </template>
                  <template v-else>
                    <custom-img class="c-w100 c-h c-text-hidden" :borderRadius="borderRadius" :url="showCover(it) || showDefultCover(it)" :imageSetting="imageSetting"></custom-img>
                  </template>
                  <vip-status :item="it" v-if="visible.vipVisible"></vip-status>
                  <div class="c-pa p-t44 c-p-l0 c-w100 c-textAlign-c c-fc-xblack c-fs36" v-if="it.prodType == ckfrom.shareholderPayVoucher"><span class="c-fw-b">{{parseFloat(it.price)}}</span><span class="c-fs28">元</span></div>
                </div>
                <div class="c-text-hidden c-pl20 c-w0 c-flex-grow1 c-flex-column c-justify-sb c-p">
                  <p class="c-fs26 c-fc-xblack c-fw-b c-fw-b" :class="getTitleVisible()">{{it.name}}</p>
                  <p class="c-fs20 c-fc-gray c-lh32" v-if="visible.dataVisible && !isAgentApply(it.prodType) && !it.marketingType && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(it.prodType)))">{{showNumber(it) | formatNumber}}{{showTypeText(it)}}</p>
                  <div class="c-fc-xblack c-flex-row c-aligni-end c-fw-b" :class="showPriceTag(it) ? 'c-fs28' : 'c-fs24'" v-if="visible.priceVisible && (!$isWxAppIos() || ($isWxAppIos() && it.payType != 2))">
                    <span class="c-fs20" v-if="showPriceTag(it)">{{'￥' | iosPriceFilter}}</span><span v-html="getRangePrice(it)"></span>
                  </div>
                  <div class="c-ww140 awClassBtn6 btn c-fc-white c-fs24 c-fw-b c-hh60 c-lh50 c-pl24 mb-4 c-pa c-p-r0 c-p-b0" v-if="visible.priceVisible">马上抢</div>
                </div>
              </div>
            </div>
          </div>
          <div class="awClassBottom6 c-hh38"></div>
        </div>
      </template>
      <template v-else-if="item.bgStyle == 7">
        <div class="bg-dc9176">
          <div class="awClassBg7 pt72 c-pb30">
            <div class="awClassheader7 header mh36">
              <div class="c-fs60 c-fw-b fc-673416 c-textAlign-c c-text-ellipsis1">
                {{item.title}}
              </div>
            </div>
            <div class="awClassBodyHeader7 c-hh90"></div>
            <div class="awClassBody7 c-ph100">
              <div class="c-bg-white c-pb36">
                <div v-for="(it, index) in item.items" :key="index" class="c-text-hidden bg-FDE7D5 bd2-DFBB9F" :style="getBorderRadius(borderRadius, '0.4rem')" :class="index == item.items.length - 1 ? '' : 'c-mb36'" @click="linkToDetail(it)">
                  <div class="c-text-hidden c-p" :style="getImageRatio(imageSetting, '3 / 2')">
                    <template v-if="it.cover && (it.cover.coverType ==1 || it.cover.coverType ==2)">
                      <vip-custom-img :imageSetting="imageSetting" :cover="it.cover" :imgClass="'imgCloseBig'" :hasText="false"/>
                    </template>
                    <template v-else>
                      <custom-img class="c-w100 c-h c-text-hidden" :borderRadius="borderRadius" :url="showCover(it) || showDefultCover(it)" :imageSetting="imageSetting"></custom-img>
                    </template>
                    <vip-status :item="it" v-if="visible.vipVisible"></vip-status>
                    <div class="c-fs20 c-fc-white c-pa c-w100 linear c-hh40 c-lh40 c-textAlign-r c-pr24 c-p-r0 c-p-b0 c-pz10" v-if="visible.dataVisible && !isAgentApply(it.prodType) && !it.marketingType && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(it.prodType)))">{{showNumber(it) | formatNumber}}{{showTypeText(it)}}</div>
                    <div class="c-ww220 awClassPriceTag7 btn c-fc-white c-hh60 c-lh56 c-pl24 c-pa c-p-l0 c-p-b0 c-fw-b c-pz10" :class="showPriceTag(it) ? 'c-fs34' : 'c-fs30'" v-if="visible.priceVisible && (!$isWxAppIos() || ($isWxAppIos() && it.payType != 2))">
                      <span class="c-fs20" v-if="showPriceTag(it)">{{'￥' | iosPriceFilter}}</span><span v-html="getRangePrice(it)"></span>
                    </div>
                  </div>
                  <p class="c-fs28 fc-673416 c-fw-b c-ph20 c-pv10" :class="getTitleVisible('c-lh40 c-hh52', 'c-lh40 c-hh52', 'c-lh40 c-hh90')">{{it.name}}</p>
                </div>
              </div>
            </div>
            <div class="awClassBottom7 c-hh40"></div>
          </div>
        </div>
      </template>
      <template v-else-if="item.bgStyle == 8">
        <div class="awClassBody8 body">
          <div class="c-pb30 awClassBg8 ph50">
            <div class="c-fs60 c-fw-b fc-F54471 c-textAlign-c c-ww250 c-lh80 awClass8Title c-text-ellipsis2 awClassTxtShadow6">
              {{item.title}}
            </div>
            <div class="c-w100 c-p c-text-hidden c-bg-white" :style="getBorderRadius(borderRadius, '0.4rem')" v-if="item.items && item.items[0]" @click="linkToDetail(item.items[0])">
              <div class="c-w100 c-text-hidden c-p c-bg-white" :style="getImageRatio(imageSetting, '3 / 2')">
                <template v-if="item.items[0].cover && (item.items[0].cover.coverType ==1 || item.items[0].cover.coverType ==2)">
                  <vip-custom-img :imageSetting="imageSetting" :borderRadiusPosition="'top'" :cover="item.items[0].cover" :imgClass="'imgCloseBig'" :hasText="false"/>
                </template>
                <template v-else>
                  <custom-img class="c-w100 c-h c-text-hidden" :borderRadiusPosition="'top'" :borderRadius="borderRadius" :url="showCover(item.items[0]) || showDefultCover(item.items[0])" :imageSetting="imageSetting"></custom-img>
                </template>
                <vip-status :item="item.items[0]" v-if="visible.vipVisible"></vip-status>
                <p class="c-fs28 c-fc-white c-fw-b linear2 c-ph22 c-pt36 c-pb8 c-pa c-p-l0 c-p-b0 c-w100 c-fw-b c-pz10" :class="getTitleVisible('c-lh40 c-hh80', 'c-lh40 c-hh80', 'c-hh120 c-lh40')">{{item.items[0].name}}</p>
              </div>
              <div class="c-flex-row c-aligni-center c-justify-sb c-pv24 c-ph20" v-if="(visible.dataVisible && !isAgentApply(item.items[0].prodType) && !item.items[0].marketingType)||visible.priceVisible">
                <div class="c-flex-row c-aligni-center">
                  <div class="fc-F54471 c-fw-b" :class="showPriceTag(item.items[0]) ? 'c-fs38' : 'c-fs34'" v-if="visible.priceVisible && (!$isWxAppIos() || ($isWxAppIos() && item.items[0].payType != 2))">
                    <span class="c-fs20" v-if="showPriceTag(item.items[0])">{{'￥' | iosPriceFilter}}</span><span v-html="getRangePrice(item.items[0])"></span>
                  </div>
                  <div class="c-fc-gray c-fs24 c-ml20" v-if="visible.dataVisible && !isAgentApply(item.items[0].prodType) && !item.items[0].marketingType && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(item.items[0].prodType)))">{{showNumber(item.items[0]) | formatNumber}}{{showTypeText(item.items[0])}}</div>
                </div>
                <div class="awClass8SingleBtn c-ww160 c-hh56 c-fs24 c-fc-white c-lh56 c-textAlign-c c-br28">立即抢购</div>
              </div>
            </div>
          </div>
          <div class="c-flex-row c-justify-sb c-flexw-wrap ph50 mb-30">
            <div v-for="(it, index) in item.items.filter((item, index) => index != 0)" :key="index" @click="linkToDetail(it)">
              <div class="c-ww260 c-text-hidden c-mb30 c-bg-white" :style="getBorderRadius(borderRadius, '0.4rem')">
                <div class="c-w100 c-text-hidden c-p c-bg-white" :style="getImageRatio(imageSetting, '3 / 2')">
                  <template v-if="it.cover && (it.cover.coverType ==1 || it.cover.coverType ==2)">
                    <vip-custom-img :imageSetting="imageSetting" :borderRadiusPosition="'top'" :cover="it.cover" :imgClass="'imgCloseBig'" :hasText="false"/>
                  </template>
                  <template v-else>
                    <custom-img class="c-w100 c-h c-text-hidden" :borderRadiusPosition="'top'" :borderRadius="borderRadius" :url="showCover(it) || showDefultCover(it)" :imageSetting="imageSetting"></custom-img>
                  </template>
                  <vip-status :item="it" v-if="visible.vipVisible"></vip-status>
                </div>
                <div class="c-bg-white c-ph10 c-pv10">
                  <p class="c-fs24 c-fc-xblack c-fw-b c-fw-b" :class="getTitleVisible()">{{it.name}}</p>
                  <p class="c-fs20 c-fc-gray c-mb12 c-mt8 c-lh24" v-if="visible.dataVisible && !isAgentApply(it.prodType) && !it.marketingType && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(it.prodType)))">{{showNumber(it) | formatNumber}}{{showTypeText(it)}}</p>
                  <div class="awClassBtn8 btn c-flex-row c-aligni-center c-justify-sb c-pl16 c-hh44" v-if="visible.priceVisible && (!$isWxAppIos() || ($isWxAppIos() && it.payType != 2))">
                    <div class="c-ww150 c-fc-white c-fw-b" :class="showPriceTag(it) ? 'c-fs28' : 'c-fs24'">
                      <span class="c-fs20" v-if="showPriceTag(it)">{{'￥' | iosPriceFilter}}</span><span v-html="getRangePrice(it)"></span>
                    </div>
                    <div class="fc-F54471 c-fw-b c-fs20 c-pr20">抢购</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="c-hh60 awClassBottom8"></div>
      </template>
      <template v-else-if="item.bgStyle == 9">
        <div class="bg-f2e5ce c-pb30">
          <div class="awClassBg9 c-ph24">
            <div class="c-fs60 c-fw-b fc-5D3F0F c-textAlign-c c-text-ellipsis1">
              {{item.title}}
            </div>
          </div>
          <div class="awClassBody9 body c-ph60 c-pb36">
            <div v-for="(it, index) in item.items" :key="index" class="c-text-hidden c-flex-row c-justify-sb" :class="index == item.items.length - 1 ? '' : 'c-mb36'" @click="linkToDetail(it)">
              <div class="c-ww240 c-text-hidden c-p c-bg-white" :style="getBorderRadius(borderRadius, '0.4rem') + getImageRatio(imageSetting, '3 / 2')">
                <template v-if="it.cover && (it.cover.coverType ==1 || it.cover.coverType ==2)">
                  <vip-custom-img :imageSetting="imageSetting" :cover="it.cover" :imgClass="'imgCloseBig'" :hasText="false"/>
                </template>
                <template v-else>
                  <custom-img class="c-w100 c-h c-text-hidden" :borderRadius="borderRadius" :url="showCover(it) || showDefultCover(it)" :imageSetting="imageSetting"></custom-img>
                </template>
                <vip-status :item="it" v-if="visible.vipVisible"></vip-status>
                <div class="c-pa p-t44 c-p-l0 c-w100 c-textAlign-c c-fc-xblack c-fs36" v-if="it.prodType == ckfrom.shareholderPayVoucher"><span class="c-fw-b">{{parseFloat(it.price)}}</span><span class="c-fs28">元</span></div>
              </div>
              <div class="c-text-hidden c-pl20 c-w0 c-flex-grow1 c-flex-column c-justify-sb">
                <p class="c-fs26 fc-5D3F0F c-fw-b c-fw-b" :class="getTitleVisible()">{{it.name}}</p>
                <p class="c-fs20 c-fc-gray c-lh32" v-if="visible.dataVisible && !isAgentApply(it.prodType) && !it.marketingType && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(it.prodType)))">{{showNumber(it) | formatNumber}}{{showTypeText(it)}}</p>
                <div class="c-flex-row c-aligni-center c-justify-center c-ww244 awClassBtn9 btn c-hh40 c-lh40 c-ph24" v-if="visible.priceVisible && (!$isWxAppIos() || ($isWxAppIos() && it.payType != 2))">
                  <div class="fc-5D3F0F c-fw-b c-flex-row c-aligni-center c-fw-b" :class="showPriceTag(it) ? 'c-fs28' : 'c-fs24'">
                    <span class="c-fs20" v-if="showPriceTag(it)">{{'￥' | iosPriceFilter}}</span><span v-html="getRangePrice(it)"></span>
                  </div>
                  <div class="fc-5D3F0F c-fs24 c-fw-b c-pl12">购</div>
                </div>
              </div>
            </div>
          </div>
          <div class="awClassBottom9 c-hh40"></div>
        </div>
      </template>
    </template>
    <template v-if="item.templateType == 2">
      <div>
        <div :style="'background-image: url('+JSON.stringify((item.backgroundImg))+');'" class="c-pt100 customBg">
          <div class="c-fs60 c-hh60 c-lh60 c-fw-b c-textAlign-c c-text-ellipsis1" :style="'color:' + item.titleColor">
            {{item.title}}
          </div>
          <div class="c-bg-white c-br-tl32 c-br-tr32 c-text-hidden c-ph22 c-pt40 c-mt100">
            <div v-if="item.orderBy == 1">
              <div v-for="(it, index) in item.items" :key="index" class="c-flex-row c-flexw-wrap c-justify-sb c-text-hidden c-mb40" @click="linkToDetail(it)">
                <div class="ww264 c-text-hidden c-p c-bg-white" :style="getBorderRadius(borderRadius, '0.4rem') + getImageRatio(imageSetting, '3 / 2')">
                  <template v-if="it.cover && (it.cover.coverType ==1 || it.cover.coverType ==2)">
                    <vip-custom-img :imageSetting="imageSetting" :cover="it.cover" :imgClass="'imgCloseBig'" :hasText="false"/>
                  </template>
                  <template v-else>
                    <custom-img class="c-w100 c-h c-text-hidden" :borderRadius="borderRadius" :url="showCover(it) || showDefultCover(it)" :imageSetting="imageSetting"></custom-img>
                  </template>
                  <vip-status :item="it" v-if="visible.vipVisible"></vip-status>
                </div>
                <div class="c-w0 c-flex-grow1 c-pl20 c-flex-column c-justify-sb">
                  <p class="c-fs24 c-fc-xblack c-fw-b c-fw-b" :class="getTitleVisible()">{{it.name}}</p>
                  <p class="c-fs20 c-fc-gray c-lh32" v-if="visible.dataVisible && !isAgentApply(it.prodType) && !it.marketingType && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(it.prodType)))">{{showNumber(it) | formatNumber}}{{showTypeText(it)}}</p>
                  <activity-window-button :item="it" :btnType="item.priceStyleType" v-if="(!$isWxAppIos() || ($isWxAppIos() && it.payType != 2)) && visible.priceVisible"></activity-window-button>
                </div>
              </div>
            </div>
            <div class="c-flex-row c-flexw-wrap c-justify-sb c-pb10" v-if="item.orderBy == 2">
              <div v-for="(it, index) in item.items" :key="index" class="c-ww288 c-text-hidden c-mb20 c-bd1" :style="getBorderRadius(borderRadius, '0.4rem')" @click="linkToDetail(it)">
                <div class="c-w100 c-text-hidden c-p c-bg-white" :style="getImageRatio(imageSetting, '3 / 2')">
                  <template v-if="it.cover && (it.cover.coverType ==1 || it.cover.coverType ==2)">
                    <vip-custom-img :imageSetting="imageSetting":borderRadiusPosition="'top'" :cover="it.cover" :imgClass="'imgCloseBig'" :hasText="false"/>
                  </template>
                  <template v-else>
                    <custom-img class="c-w100 c-h c-text-hidden" :borderRadius="borderRadius":borderRadiusPosition="'top'" :url="showCover(it) || showDefultCover(it)" :imageSetting="imageSetting"></custom-img>
                  </template>
                  <vip-status :item="it" v-if="visible.vipVisible"></vip-status>
                </div>
                <div class="c-text-hidden c-pv16 c-ph16">
                  <p class="c-fs24 c-fc-xblack c-fw-b c-mb6 c-fw-b" :class="getTitleVisible()">{{it.name}}</p>
                  <p class="c-fs20 c-fc-gray c-mb12 c-lh32" v-if="visible.dataVisible && !isAgentApply(it.prodType) && !it.marketingType && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(it.prodType)))">{{showNumber(it) | formatNumber}}{{showTypeText(it)}}</p>
                  <activity-window-button :item="it" :btnType="item.priceStyleType" v-if="(!$isWxAppIos() || ($isWxAppIos() && it.payType != 2)) && visible.priceVisible"></activity-window-button>
                </div>
              </div>
            </div>
            <div v-if="item.orderBy == 6">
              <div class="c-flex-row c-flexw-wrap c-justify-sb">
                <div v-for="(it, index) in item.items.filter((item, index) => index < 2)" :key="index" class="c-ww288 c-text-hidden c-mb40 c-bd1" :style="getBorderRadius(borderRadius, '0.4rem')" @click="linkToDetail(it)">
                  <div class="c-w100 c-text-hidden c-p c-bg-white" :style="getImageRatio(imageSetting, '3 / 2')">
                    <template v-if="it.cover && (it.cover.coverType ==1 || it.cover.coverType ==2)">
                      <vip-custom-img :imageSetting="imageSetting" :borderRadiusPosition="'top'" :cover="it.cover" :imgClass="'imgCloseBig'" :hasText="false"/>
                    </template>
                    <template v-else>
                      <custom-img class="c-w100 c-h c-text-hidden" :borderRadius="borderRadius":borderRadiusPosition="'top'" :url="showCover(it) || showDefultCover(it)" :imageSetting="imageSetting"></custom-img>
                    </template>
                    <vip-status :item="it" v-if="visible.vipVisible"></vip-status>
                  </div>
                  <div class="c-text-hidden c-pv16 c-ph16">
                    <p class="c-fs24 c-fc-xblack c-fw-b c-mb6 c-fw-b" :class="getTitleVisible()">{{it.name}}</p>
                    <p class="c-fs20 c-fc-gray c-mb12 c-lh32" v-if="visible.dataVisible && !isAgentApply(it.prodType) && !it.marketingType && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(it.prodType)))">{{showNumber(it) | formatNumber}}{{showTypeText(it)}}</p>
                    <activity-window-button :item="it" :btnType="item.priceStyleType" v-if="(!$isWxAppIos() || ($isWxAppIos() && it.payType != 2)) && visible.priceVisible"></activity-window-button>
                  </div>
                </div>
              </div>
              <div v-for="(it, index) in item.items.filter((item, index) => index >= 2)" :key="index" class="c-flex-row c-flexw-wrap c-justify-sb c-text-hidden c-mb40" @click="linkToDetail(it)">
                <div class="ww264 c-text-hidden c-p c-bg-white" :style="getBorderRadius(borderRadius, '0.4rem') + getImageRatio(imageSetting, '3 / 2')">
                  <template v-if="it.cover && (it.cover.coverType ==1 || it.cover.coverType ==2)">
                    <vip-custom-img :imageSetting="imageSetting" :cover="it.cover" :imgClass="'imgCloseBig'" :hasText="false"/>
                  </template>
                  <template v-else>
                    <custom-img class="c-w100 c-h c-text-hidden" :borderRadius="borderRadius" :url="showCover(it) || showDefultCover(it)" :imageSetting="imageSetting"></custom-img>
                  </template>
                  <vip-status :item="it" v-if="visible.vipVisible"></vip-status>
                </div>
                <div class="c-w0 c-flex-grow1 c-pl20 c-flex-column c-justify-sb">
                  <p class="c-fs24 c-fc-xblack c-fw-b c-fw-b" :class="getTitleVisible()">{{it.name}}</p>
                  <p class="c-fs20 c-fc-gray c-lh32" v-if="visible.dataVisible && !isAgentApply(it.prodType) && !it.marketingType && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(it.prodType)))">{{showNumber(it) | formatNumber}}{{showTypeText(it)}}</p>
                  <activity-window-button :item="it" :btnType="item.priceStyleType" v-if="(!$isWxAppIos() || ($isWxAppIos() && it.payType != 2)) && visible.priceVisible"></activity-window-button>
                </div>
              </div>
            </div>
            <div v-if="item.orderBy == 7">
              <div v-for="(it, index) in item.items.filter((item, index) => index < 1)" :key="index" class="c-text-hidden c-mb40 c-bd1" :style="getBorderRadius(borderRadius, '0.4rem')" @click="linkToDetail(it)">
                <div class="c-w100 c-text-hidden c-p c-bg-white" :style="getImageRatio(imageSetting, '3 / 2')">
                  <template v-if="it.cover && (it.cover.coverType ==1 || it.cover.coverType ==2)">
                    <vip-custom-img :imageSetting="imageSetting" :cover="it.cover" :imgClass="'imgCloseBig'" :hasText="false"/>
                  </template>
                  <template v-else>
                    <custom-img class="c-w100 c-h c-text-hidden" :borderRadius="borderRadius" :url="showCover(it) || showDefultCover(it)" :imageSetting="imageSetting"></custom-img>
                  </template>
                  <vip-status :item="it" v-if="visible.vipVisible"></vip-status>
                  <p class="c-fs28 c-fc-white c-fw-b linear2 c-ph22 c-pt36 c-pb8 c-pa c-p-l0 c-p-b0 c-w100 c-fw-b c-pz10" :class="getTitleVisible('c-lh40 c-hh80', 'c-lh40 c-hh80', 'c-hh120 c-lh40')">{{it.name}}</p>
                </div>
                <div class="c-text-hidden c-pv20 c-ph20 c-flex-row c-aligni-center c-justify-sb">
                  <div class="c-flex-row c-aligni-center c-w0 c-flex-grow1">
                    <div class="c-fc-white c-textAlign-c c-fw-b" :class="[getPrice(it) != 0 ? 'c-fs34' : 'c-fs30', item.priceStyleType == 1 ? 'fc-EB3E3C' : item.priceStyleType == 2 ? 'fc-D11618' : item.priceStyleType == 3 ? 'c-fc-xblack' : 'fc-C8872F']" v-if="(!$isWxAppIos() || ($isWxAppIos() && it.payType != 2)) && visible.priceVisible">
                      <span class="c-fs20" v-if="getPrice(it) != 0">{{'￥' | iosPriceFilter}}</span><span v-html="getRangePrice(it)"></span>
                    </div>
                    <p class="c-fs20 c-fc-gray c-ml20" v-if="visible.dataVisible && !isAgentApply(it.prodType) && !it.marketingType && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(it.prodType)))">{{showNumber(it) | formatNumber}}{{showTypeText(it)}}</p>
                  </div>
                  <activity-window-button :item="it" :btnType="item.priceStyleType + 4"></activity-window-button>
                </div>
              </div>
              <div class="c-flex-row c-flexw-wrap c-justify-sb">
                <div v-for="(it, index) in item.items.filter((item, index) => index >= 1)" :key="index" class="c-ww288 c-text-hidden c-mb40 c-bd1" :style="getBorderRadius(borderRadius, '0.4rem')" @click="linkToDetail(it)">
                  <div class="c-w100 c-text-hidden c-p c-bg-white" :style="getImageRatio(imageSetting, '3 / 2')">
                    <template v-if="it.cover && (it.cover.coverType ==1 || it.cover.coverType ==2)">
                      <vip-custom-img :imageSetting="imageSetting" :cover="it.cover" :imgClass="'imgCloseBig'" :hasText="false"/>
                    </template>
                    <template v-else>
                      <custom-img class="c-w100 c-h c-text-hidden" :borderRadius="borderRadius" :url="showCover(it) || showDefultCover(it)" :imageSetting="imageSetting"></custom-img>
                    </template>
                    <vip-status :item="it" v-if="visible.vipVisible"></vip-status>
                  </div>
                  <div class="c-text-hidden c-pv16 c-ph16">
                    <p class="c-fs24 c-fc-xblack c-fw-b c-mb6 c-fw-b" :class="getTitleVisible()">{{it.name}}</p>
                    <p class="c-fs20 c-fc-gray c-mb12 c-lh32" v-if="visible.dataVisible && !isAgentApply(it.prodType) && !it.marketingType && (enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(it.prodType)))">{{showNumber(it) | formatNumber}}{{showTypeText(it)}}</p>
                    <activity-window-button :item="it" :btnType="item.priceStyleType" v-if="(!$isWxAppIos() || ($isWxAppIos() && it.payType != 2)) && visible.priceVisible"></activity-window-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </section>
</template>
<script>
import { appRouterChange } from "@/mixin/appRouterPush.js";
import { goDetails } from "@/utils/goDetails.js";
import { customStyle } from '@/utils/customStyle.js'
import activityWindowButton from '@/components/templates/custIndexTemp/activityWindowButton.vue';
import VipCustomImg from "@/components/templates/common/VipCustomImg.vue";
import vipStatus from '@/components/templates/common/vipStatus.vue'
import CustomImg from '@/components/templates/customImg.vue'
export default {
  name: 'activityWindow',
  mixins: [appRouterChange, customStyle],
  components: {activityWindowButton, vipStatus, CustomImg, VipCustomImg},
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      },
    },
    pageName: {//首页INDEX 预览页PREVIEW_INDEX 微页面MICRO_PAGE
      type: String,
      default: "INDEX"
    },
    swiperIndex: {
      type: Number,
      default: ''
    },
    // 价格、商品价格：priceVisible
    // 划线价格：originalPriceVisible
    // 商品数据、数据字段、数据：dataVisible
    // 状态：statusVisible
    // 预告时间：forecastVisible
    // 预告二维码：qrVisible
    // vip角标：vipVisible
    visible:{
      type: Object,
      default: () => {
        return {
          priceVisible:true,
          originalPriceVisible:true,
          dataVisible:true,
          statusVisible:true,
          forecastVisible:true,
          qrVisible:true,
          vipVisible:true,
        }
      },
    }
  },
  data() {
    return {
      isUp: true,
      prodMapType: global.prodMapType,
      ckfrom: global.ckFrom,
      bgMap: {
        1: 'https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/index/tutorBg1.png',
        2: 'https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/index/tutorBg2.png',
        3: 'https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/index/tutorBg3.png'
      },
      enableShowModuleView: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableShowModuleView : 1,
      enableHiddenModules: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableHiddenModules : [],
    };
  },
  watch: {
  },
  created() {
  },
  computed: {
    // 展示价格￥符号
    showPriceTag() {
      return function(item) {
        if (this.getPrice(item) > 0) {
          return true
        }
        return false
      }
    },
    // 价格展示
    getRangePrice() {
      return function(item) {
        let price = item.prodType == this.ckfrom.shopping ? item.goodsPrice : this.getPrice(item);
        let prodType = item.prodType;
        let payType = item.payType;
        let isWxAppIos = !!(localStorage.getItem('isWxAppIos') == 1) || false;
        price = '' + price
        if (payType == 2 || item.prodType == this.ckfrom.shopping) {
          if (item.optimal) {
            if (item.optimal.optimalPrice == 0) {
              // 特别需求 item.optimal.optimalPriceType != 1 价格免费展示商品原价
              return item.optimal.optimalPriceType != 1 && price != 0 ? (isWxAppIos ? '' : price) : "免费";
            } else {
              return isWxAppIos ? '' : item.optimal.optimalPrice;
            }
          }
          if (price.includes('~') && price.split('~')[0] && price.split('~')[1]) {
            if (price.split('~')[0] != price.split('~')[1]) {
              price = `${(price.split('~')[0] * 1).toFixed(2)}<span class="c-fs18">起</span>`
            } else if (price.split('~')[0] == price.split('~')[1]) {
              price = price.split('~')[1] > 0 ? (price.split('~')[1] * 1).toFixed(2) : '免费'
            }
            return isWxAppIos ? '' : price;
          } else if (price == 0) {
            return '免费'
          } else {
            return isWxAppIos ? '' : (price * 1).toFixed(2);
          }
        } else if (payType == 1 || ((item.marketingType && item.marketingType == 3 && item.reservePrice == 0))) {
          return "免费";
        } else if (payType == 3) {
          return "加密";
        } else if (payType == 4 && prodType == global.ckFrom.circle) {
          return "配套课程";
        } else if (payType == 5) {
          return isWxAppIos ? '' : '指定购买';
        } else if (payType == 6) {
          return '指定学员';
        } else {
          return isWxAppIos ? '' : (price * 1).toFixed(2);
        }
      }
    },
    getTitleVisible() {
      return function(class1, class2, class3) {
        // if (this.visible && String(this.visible.titleVisible)) {
        //   return this.visible.titleVisible == 0 ? 'visible-hidden ' + (class1 ? class1 : 'c-hh32') : this.visible.titleVisible == 1 ? 'c-text-ellipsis1 ' + (class2 ? class2 : 'c-hh32 c-lh32') : this.visible.titleVisible == 2 ? 'c-text-ellipsis2 ' + (class3 ? class3 : 'c-hh64 c-lh32') : '';
        // }
        return 'c-text-ellipsis2'
      }
    },
    imageSetting() {
      return this.item.styleParam && this.item.styleParam.imageSetting ? this.item.styleParam.imageSetting : null
    },
    borderRadius() {
      return this.item.styleParam && this.item.styleParam.borderRadius ? this.item.styleParam.borderRadius : null
    },
    // 获取默认头像
    showDefultCover() {
      return function (item) {
        return (item.prodType == this.ckfrom.exam ? require('../../../assets/examination_defult.png') : item.prodType == this.ckfrom.shareholderPayVoucher ? require('../../../../public/i/wap/coupon/cashCoupon.png') : require('../../../assets/defult270.png'));
      }
    },
    // 获取封面图
    showCover() {
      return function (item) {
        return item.cover || item.avatar;
      }
    },
    // 获取展示价格
    getPrice() {
      return function (item) {
        // marketingType 1=限时购;2=拼团;3=砍价
        let price = item.prodType == this.ckfrom.shareholderPayVoucher ? item.salePrice : item.prodPrice;
        if (item.marketingType == 1) {
          price = item.price;
        } else if (item.marketingType == 2) {
          price = item.captainPrice;
        } else if (item.marketingType == 3) {
          price = item.reservePrice;
        }
        return price;
      }
    },
    isAgentApply() {
      return function (prodType) {
        return [this.ckfrom.agentApply, this.ckfrom.partnerApply, this.ckfrom.branchApply, this.ckfrom.cooApply, this.ckfrom.agencyApply, this.ckfrom.agent6Apply, this.ckfrom.agent7Apply, this.ckfrom.agent8Apply, this.ckfrom.agent9Apply].includes(prodType)
      }
    },
    // 显示的观看（购买）数量
    showNumber() {
      return function (data) {
        var numberVal = 0
        switch (parseFloat(data.prodType)) {
          case this.ckfrom.column: case this.ckfrom.package:
            numberVal = data.prodPrice > 0 ? data.number : data.visits;
            break;
          case this.ckfrom.shareholderPayVoucher:
            numberVal = data.num - data.leftNum;
            break;
          default:
            numberVal = data.number;
            break;
        }
        return numberVal || 0
      }
    },
    showTypeText() {
      return function (data) {
        var str = '';
        switch (parseFloat(data.prodType)) {
          case this.ckfrom.course:
            str = data.courseType == 1 ? `次收听` : '次观看';
            break;
          case this.ckfrom.column: case this.ckfrom.package:
            str = data.prodPrice > 0 && data.payType == 2 ? '人已购买' : '次观看';
            break;
          case this.ckfrom.shopping: case this.ckfrom.shareholderPayVoucher:
            str = '人已购买';
            break;
          case this.ckfrom.live:
            str = '人次观看';
            break;
          case this.ckfrom.camp:
            str = '人报名';
            break;
          default:
            str = '';
            break;
        }
        return str;
      }
    },
  },
  methods: {
    // 跳转详情
    linkToDetail(data) {
      if (this.pageName == 'PREVIEW_INDEX') {
        return;
      }
      let parameter = data.prodType == this.ckfrom.shareholderPayVoucher ? {fromModule: `${data.fromModule}`, source: 22} : {};
      let prodType = data.prodType;
      let id = data.id;
      if (data.marketingType) {
        id = data.prodId;
        if ((prodType == this.ckfrom.collageVip || prodType == this.ckfrom.collageSvip || prodType == this.ckfrom.vip || prodType == this.ckfrom.svip) && data.marketingType == 2) {// 拼团
          if (data.status && [1, 2].includes(data.status)) parameter.isCollage = true;
          prodType = this.ckfrom.vip;
        }
        if ((prodType == this.ckfrom.flashSalesVip || prodType == this.ckfrom.flashSalesSvip || prodType == this.ckfrom.vip || prodType == this.ckfrom.svip) && data.marketingType == 1) { // 限时折扣
          if (data.sales && [1, 2].includes(data.sales.status)) parameter.isSales = true;
          prodType = this.ckfrom.vip;
        }
        if ((prodType == this.ckfrom.vip || prodType == this.ckfrom.svip) && data.marketingType == 3 && data.status && [1, 2].includes(data.status)) { // 砍价
          parameter.isBargain = true;
        }
        if (data.marketingType == 3 && data.prodType == this.ckfrom.activity) {// 活动票参与砍价
          id = data.extraId;
        }
      }
      goDetails(this, prodType, id, parameter, data.courseType, 1);
    }
  },
};
</script>

<style scoped>
.awClassLinear1 {
  background: -webkit-linear-gradient(90deg, rgba(252, 205, 162), rgba(254, 234, 214));
}
.header{
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: top;
}
.btn {
  background-repeat:no-repeat;
	background-size:100% 100%;
	-moz-background-size:100% 100%;
  background-position: left bottom;
}
.body {
  background-size: 100% auto;
  background-repeat: repeat-y;
}
.bottom {
  background-size: 100% auto;
  background-position-x: center;
  background-position-y: bottom;
  background-repeat: no-repeat;
}
.awClassheader1 {
  background-image: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/index/activityWindowClass1_header1.png');
  padding-top: 2.9rem;
  padding-bottom: 3.1rem;
  background-position-y: bottom;
}
.awClassBtn1 {
  height: 1.35rem;
  background-image: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/index/activityWindowClass1_but.png');
}
.awClassTxtShadow1 {
  text-shadow: 0px 2px 2px #ea412d;
}
.c-fcff4118 {
  color: #FF4118;
}
.c-ww290 {
  width: 7.25rem;
}
.awClassheader3 {
  background-image: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/index/activityWindowClass2_header1.png');
  padding-top: 3.25rem;
  background-size: 100.4% 21rem;
}
.c-fc-fff8da {
  color: #fff8da;
}
.awClassInnerBody3 {
  background-image: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/index/activityWindowClass2_inner_body.png');
}
.awClassInnerBottom3 {
  background-image: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/index/activityWindowClass2_inner_buttom.png');
}
.awClassBtn3 {
  background-image: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/index/activityWindowClass2_but.png');
  width: 5.7rem;
  padding-top: 0.42rem;
  padding-bottom: 0.3rem;
}
.awClassBg3 {
  background-image: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/index/activityWindowClass2_body.png');
}
.c-fc-d21318 {
  color: #d21618;
}
.awClassheader2 {
  background-image: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/index/activityWindowClass3_header1.png');
  padding-top: 2.9rem;
  padding-bottom: 2.65rem;
}
.awClassBody2 {
  background-image: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/index/activityWindowClass3_body.png');
}
.awClassBottom2 {
  background-image: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/index/activityWindowClass3_bottom.png');
}
.awClassBtn2 {
  background-image: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/index/activityWindowClass3_but.png');
  width: 6.35rem;
  padding-top: 0.4rem;
  padding-bottom: 0.35rem;
  box-sizing: border-box;
}
.awClassheader4 {
  background-image: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/index/activityWindowClass4_header1.png');
  padding-top: 3.45rem;
  padding-bottom: 2.85rem;
}
.awClassBody4 {
  background-image: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/index/activityWindowClass4_body.png');
}
.awClassBottom4 {
  background-image: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/index/activityWindowClass4_bottom.png');
}
.awClassBtn4 {
  box-sizing: border-box;
  background-image: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/index/activityWindowClass4_but.png');
}
.awClassheader5 {
  background-image: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/index/activityWindowClass5_header.png');
  padding-top: 3.45rem;
  padding-bottom: 3.5rem;
  background-position-y: bottom;
}
.awClassBody5 {
  background-image: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/index/activityWindowClass5_repeat.png');
  background-size: 100% auto;
}
.awClassBottom5 {
  background-image: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/index/activityWindowClass5_but.png');
  background-size: 100% auto;
  background-position: center bottom;
}
.awClassBtn5 {
  box-sizing: border-box;
  background-image: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/index/activityWindowClass5_btn.png');
}
.awClassTxtShadow5 {
  text-shadow: 0 0.1rem 0 #FFD6D9;
}
.bg-ffe2e9 {
  background-color: #ffe2e9;
}
.mt-30 {
  margin-top: -0.75rem;
}
.awClassBg6 {
  background-image: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/index/activityWindowClass6_bg.png');
  background-size: 100% 100%;
}
.awClassheader6 {
  background-image: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/index/activityWindowClass6_header.png');
  padding-top: 2rem;
  padding-bottom: 4.2rem;
}
.awClassBottom6 {
  background-image: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/index/activityWindowClass6_buttomBg.png');
  background-size: 100% auto;
  background-position: center bottom;
}
.awClassBtn6 {
  box-sizing: border-box;
  background-image: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/index/activityWindowClass6_btn.png');
}
.fc-6A01CF {
  color: #6A01CF;
}
.awClassTxtShadow6 {
  text-shadow: 0 0.1rem 0 #FFFFFF;
}
.awClassBg7 {
  background-image: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/index/activityWindowClass7_bg.png');
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
}
.awClassheader7 {
  background-image: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/index/activityWindowClass7_header.png');
  padding-top: 1.4rem;
  padding-bottom: 2rem;
}
.awClassBodyHeader7 {
  background-image: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/index/activityWindowClass7_bodyHeader.png');
  background-size: 100% auto;
  background-position: center top;
}
.awClassBody7 {
  background-image: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/index/activityWindowClass7_repeat.png');
  background-size: 100% auto;
}
.awClassBottom7 {
  background-image: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/index/activityWindowClass7_bottom.png');
  background-size: 100% auto;
  background-position: center bottom;
}
.awClassPriceTag7 {
  box-sizing: border-box;
  background-image: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/index/activityWindowClass7_priceTag.png');
}
.bg-dc9176 {
  background-color: #dc9176;
}
.fc-673416 {
  color: #673416;
}
.pt72 {
  padding-top: 1.8rem;
}
.mh36 {
  margin-left: 0.9rem;
  margin-right: 0.9rem;
}
.bd2-DFBB9F{
  border: 2px solid #DFBB9F
 }
.bg-FDE7D5 {
  background-color: #FDE7D5;
}
.linear {
  opacity: 0.7;
  background: -webkit-linear-gradient(270deg, rgb(0, 0, 0, 0), rgb(0, 0, 0, 1));
}
.awClassBg8 {
  background-image: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/index/activityWindowClass8_bg.png');
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
}
.awClassheader8 {
  background-image: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/index/activityWindowClass7_header.png');
  padding-top: 1.4rem;
  padding-bottom: 2rem;
}
.awClassBody8 {
  background-image: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/index/activityWindowClass8_repeat.png');
  background-size: 100% auto;
}
.awClassBottom8 {
  background-image: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/index/activityWindowClass8_bottom.png');
  background-size: 100% auto;
  background-position: center top;
}
.awClassBtn8 {
  box-sizing: border-box;
  background-image: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/index/activityWindowClass8_btn.png');
}
.awClass8SingleBtn {
  background-image: linear-gradient(180deg, #FFBDCD 1%, #FF3165 100%);
  box-shadow: 0 2px 4px 0 rgb(255 20 85 / 30%);
}
.awClass8Title {
  margin-bottom: 2.75rem;
  padding-top: 2.6rem;
  transform: rotate(1.6deg);
  margin-left: 4.6rem;
}
.fc-F54471 {
  color: #F54471;
}
.ph50 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.linear2 {
  background: -webkit-linear-gradient(270deg, rgb(0, 0, 0, 0.02), rgb(0, 0, 0, 0.6));
}
.awClassBg9 {
  background-image: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/index/activityWindowClass9_bg.png');
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
  padding-top: 1.6rem;
  padding-bottom: 4.4rem;
}
.awClassBody9 {
  background-image: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/index/activityWindowClass9_repeat.png');
  background-size: 100% auto;
}
.awClassBottom9 {
  background-image: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/index/activityWindowClass9_bottom.png');
  background-size: 100% auto;
  background-position: center bottom;
}
.awClassBtn9 {
  box-sizing: border-box;
  background-image: url('https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/index/activityWindowClass9_btn.png');
}
.bg-f2e5ce {
  background-color: #f2e5ce;
}
.fc-5D3F0F {
  color: #5D3F0F;
}
.c-ph60 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.c-mb36 {
  margin-bottom: 0.9rem;
}
.br-right32 {
  border-bottom-right-radius: 0.8rem;
  border-top-right-radius: 0.8rem;
}
.aw4ButBg{
  background: -webkit-linear-gradient(0, #7c2fef, #ff5e8f);
}
.c-pl190 {
  padding-left: 4.85rem;
}
.c-fc-94661E {
  color: #94661E;
}
.c-hh344 {
  height: 8.6rem;
}
.c-hh164 {
  height: 4.1rem;
}
.c-hh192 {
  height: 4.8rem;
}
.c-bd1-white {
  border: 1px solid #ffffff;
}
.boxShaDow {
  box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.05);
}
.c-translucent-white80
{
  background-color: rgba(255, 255, 255, 0.8);
}
.c-pb56 {
  padding-bottom: 1.4rem;
}
.ph {
  padding-left: 0.38rem;
  padding-right: 0.4rem;
}
.c-maxh290 {
  max-height: 7.25rem;
}
.c-maxh520 {
  max-height: 13rem;
}
.c-maxh250 {
  max-height: 6.25rem;
}
.c-minh180 {
  min-height: 4.5rem;
}
.glass {
  background-image: url("../../../assets/i/wap/datum/glass.png");
}
.backdropFilter {
  backdrop-filter: blur(4px);
}
.c-pz5 {
  z-index: 5;
}
.p-t38 {
  top: 0.95rem;
}
.p-t44 {
  top: 1.1rem;
}
.ww264 {
  width: 6.6rem;
}
.maxh264 {
  max-height: 6.6rem;
}
.fc-EB3E3C {
  color: #EB3E3C;
}
.fc-D11618 {
  color: #D11618;
}
.fc-C8872F {
  color: #C8872F;
}
.mb-4 {
  margin-bottom: -0.1rem;
}
.mb-30 {
  margin-bottom: -0.75rem;
}
.customBg {
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100% auto;
}
.ph38 {
  padding-left: 0.95rem;
  padding-right: 0.95rem;
}
</style>